import cn from '../cn';

type CategoriedItem = {
  name: string;
  onClick: () => void;
  active: boolean;
};

type Category = {
  name: string;
  active: boolean;
  items: CategoriedItem[];
};

type CategoriedListProps = {
  items: Category[];
};

export default function CategoriedList({ items }: CategoriedListProps) {
  return (
    <ul className="flex flex-col">
      {items.map((category) => (
        <li key={category.name} className="mb-2">
          <div className="text-gray-500 font-light">{category.name}</div>
          <ul className="flex flex-col gap-1">
            {category.items.map((item) => (
              <li
                key={item.name}
                onClick={item.onClick}
                className={cn(
                  item.active ? 'text-gray-900 font-bold' : 'text-gray-500',
                  'block px-4 py-2 text-sm text-left hover:bg-gray-100 hover:cursor-pointer'
                )}
              >
                {item.name}
              </li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
}
